<template>
<div class="todo-footer" v-if="this.todos.length">
  <label>
<!--    <input type="checkbox" :checked="isAll" @change="allChange"/>-->
    <input type="checkbox" v-model="isAll"/>
  </label>
  <span>
    <span>已完成{{doneTotal}}</span>/全部{{todos.length}}
  </span>
  <button class="btn btn-danger" @click="clearAll">清除已完成任务</button>
</div>
</template>

<script>
export default {
  name: "MyFooter",
  props:['todos','checkedAll','cleanAll'],
  computed:{
    doneTotal(){
      // const len = this.todos.filter((todo)=>{
      //   return todo.done===true
      // }).length
      // return len
      //reduce 方法
      return this.todos.reduce((pre,current)=>{return pre+(current.done? 1:0)},0)
    },
    isAll:{
      get(){
        return this.doneTotal ===this.todos.length && this.todos.length>0

      },
      set(val){
        this.checkedAll(val)
      }
    },

  },
  methods:{
    allChange(e){
    this.checkedAll(e.target.checked)
    },
    clearAll(){
      if(confirm('确定全部删除？'))
      this.cleanAll()
    }
  },
}
</script>

<style scoped>
.todo-footer{
  width: 560px;
  height: 28px;
  font-size: 14px;
  border: 1px solid darkgray;
  border-radius: 4px;
  padding: 4px 7px;
}
</style>
